import React, {useEffect, useState} from "react";
import _ from "lodash";
import {message, Table} from "antd";
import {ColumnsType} from "antd/lib/table";
import {EXT_TYPE_NAME, ILog} from "@/common/interfaces/syslog";
import {getProperty, getSysLog} from "@/common/apis/root-api";
import {BackToTop} from "@/common/util";
import {IPageResponse} from "@/common/common";

const Log = () => {

  console.log('%c%s', 'color: blue;', '[platform-front] Log -----------');

  const [result, setResult] = useState<IPageResponse<ILog>>({
    code: 0,
    pageInfo: {page: 1, size: 10, pages: 0, total: 0}
  })

  useEffect(() => {
    getJournalList({page: 1, size: 10});
    BackToTop();
  }, []);

  const getJournalList = async (pageInfo: any) => {
    const res: IPageResponse<ILog> = await getSysLog(pageInfo);
    if (res.code === 0) {
      setResult({code: 0, data: res.data, pageInfo: res.pageInfo})
    }
  };

  const columns: ColumnsType<ILog> = [
    {
      title: "登陆ip",
      dataIndex: "ip",
      width: "16%",
      render: (text) => {
        return text ? text : "-";
      },
    },
    {
      title: "操作类型",
      dataIndex: "type",
      width: "12%",
      render: (text) => {
        return EXT_TYPE_NAME[_.toUpper(text)];
      },
    },
    {
      title: "操作内容",
      dataIndex: "content",
      width: "48%",
      ellipsis: true,
    },
    {
      title: "操作时间",
      dataIndex: "createTime",
      width: "24%",
    }
  ]

  return (
    <div className="sys_log">
      <Table
        rowKey={record => record.id + ""}
        columns={columns}
        dataSource={result.data}
        pagination={{
          total: result.pageInfo.total,
          current: result.pageInfo.page,
          pageSize: result.pageInfo.size,
          showSizeChanger: true,
          onChange: (pageNo, pageSize) => {
            getJournalList({page: pageNo, size: pageSize || 10})
          },
          onShowSizeChange: (pageNo, pageSize) => {
            getJournalList({page: pageNo, size: pageSize || 10})
          }
        }}
      />
    </div>
  )
}

export default Log
